import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {Row, Col, Button, Popconfirm, Icon} from 'antd'
import List from './List'
import Filter from './Filter'
import Modal from './Modal'
import ChatModal from './ChatModal'
import {Tabs} from 'antd'
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import Store from "src/store";
import App from 'src/components/App';
import Chat from 'src/pages/Chat/Index';
import {ajaxJson} from "src/utils/ajax";
import {fetchJson} from "src/utils/fetch";
import Storage from 'src/utils/storage';
import {bindActionCreators} from "redux";
import classnames from 'classnames';
import actions from "src/actions";
import {CHAT_LOGIN,SET_SESSION,FILTER_SEARCH,CHAT_INIT,SEND_MESSAGE,RECEIVE_MESSAGE,SET_DESTROY,SET_LOGOUT} from "src/constants/Chat";
let _store = new Storage(),
  Storage_Key = 'username';
_store.set(Storage_Key,"wujinsong",120);

const TabPane = Tabs.TabPane

const EnumPostStatus = {
  粉丝列表: 1,
  粉丝排行榜: 2,
  粉丝黑名单: 3
}

let activeKey = "1";

const Fans = ({location, dispatch, fans, loading}) => {
  const {list, pagination, currentItem, modalVisible, chatModalVisible, modalType, isMotion, selectedRowKeys,groupVisible,selectGroupVisible,groupName,groupList,checkedGroupList,tagVisible,selectTagVisible,tagName,tagList,checkedTagList} = fans
  const {pageSize} = pagination
  const {query = {}, pathname} = location

  console.log("query = {}" + query)

  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['fans/update'],
    title: `${modalType === 'create' ? 'Create fans' : 'Update fans'}`,
    wrapClassName: 'vertical-center-nopadding-modal',
    onOk (data) {
      dispatch({
        type: `fans/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'fans/hideModal',
      })
    },
  }
  
  const chatModalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: chatModalVisible,
    maskClosable: false,
    // confirmLoading: loading.effects['fans/update'],
    title: `${modalType === 'create' ? '' : ''}`,
    wrapClassName: 'vertical-center-nopadding-modal',
    width: '900',
    height:'600',
    footer: null,
    header:null,
    onOk (data) {
      dispatch({
        type: `fans/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'fans/hideChatModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    loading: loading.effects['fans/query'],
    pagination,
    location,
    isMotion,
    onChange (page) {
      const {query, pathname} = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'fans/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'fans/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
    showChatModal() {
      dispatch({
        type: 'fans/showChatModal',
        payload: {
          modalType: 'create'
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'fans/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const filterProps = {
    isMotion,
    // 组管理
    groupVisible,
    groupName,
    selectGroupVisible,
    groupList,
    checkedGroupList,
    // 标签管理
    tagVisible,
    tagName,
    selectTagVisible,
    tagList,
    checkedTagList,
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          page: 1,
          pageSize,
        },
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/fans',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/fans',
      }))
    },
    onAdd () {
      dispatch({
        type: 'fans/showModal',
        payload: {
          modalType: 'create',
        },
      })
    },
    switchIsMotion () {
      dispatch({type: 'fans/switchIsMotion'})
    },
    // 组管理
    // 确认添加分组
    onAddGroup(data) {
      dispatch({
        type: 'fans/createGroup',
        payload: data,
      })
    },
    // 显示分组
    onShowGroup() {
      dispatch({type: 'fans/showGroup'})
    },
    // 取消分组
    onCancelGroup() {
      dispatch({type: 'fans/hideGroup'})
    },

    //  选择分组
    onShowSelectGroups() {
      dispatch({
        type: 'fans/listAllGroups',
        payload: {},
      })
    },
    onCancelSelectGroup() {
      dispatch({type: 'fans/hideSelectGroup'})
    },
    // 确认选择分组
    onConfirmSelectGroup(data) {
      debugger
      dispatch({
        type: 'fans/hideSelectGroup',
        payload: {checkedGroupList:data},
      })
    },

    // 标签管理
    // 确认添加标签
    onAddTag(data) {
      dispatch({
        type: 'fans/createTag',
        payload: data,
      })
    },

    // 显示标签
    onShowTag() {
      dispatch({type: 'fans/showTag'})
    },

    // 取消标签
    onCancelTag() {
      dispatch({type: 'fans/hideTag'})
    },

    //  选择标签
    onShowSelectTags() {
      dispatch({
        type: 'fans/listAllTags',
        payload: {},
      })
    },

    onCancelSelectTag() {
      dispatch({type: 'fans/hideSelectTag'})
    },

    // 确认选择标签
    onConfirmSelectTag(data) {
      debugger
      dispatch({
        type: 'fans/hideSelectTag',
        payload: {checkedTagList:data},
      })
    },
  }

  const handleDeleteItems = () => {
    dispatch({
      type: 'fans/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
  }


  const handleTabClick = (key) => {
    activeKey = key;
    dispatch(routerRedux.push({
      pathname,
      query: {
        status: key,
      },
    }))
  }

  return (
    <div className="content-inner">
      <Tabs activeKey={activeKey} onTabClick={handleTabClick}>
        <TabPane tab="粉丝列表" key={String(EnumPostStatus.粉丝列表)}>
          <Filter {...filterProps} />
          {
            selectedRowKeys.length > 0 &&
            <Row style={{ marginBottom: 24,marginTop:24, textAlign: 'right', fontSize: 13 }}>
              <Col>
                {`选中了 ${selectedRowKeys.length} 项 `}
                <Button type="primary" style={{marginLeft:'5px'}}>
                  <Icon type="team"/>粉丝分组
                </Button>
                <Button type="primary" style={{marginLeft:'5px'}}>
                  <Icon type="tags"/> 粉丝标签
                </Button>
                <Popconfirm title={'确定同步选中粉丝?'} placement="left" onConfirm={handleDeleteItems}>
                  <Button type="primary" style={{marginLeft:'5px'}}>
                    <Icon type="reload"/>
                    同步选中粉丝
                  </Button>
                </Popconfirm>
                <Popconfirm title={'确定下载粉丝信息?'} placement="left" onConfirm={handleDeleteItems}>
                  <Button type="primary" style={{marginLeft:'5px'}}>
                    <Icon type="download"/>
                    下载粉丝信息
                  </Button>
                </Popconfirm>
                <Popconfirm title={'确定加入黑名单?'} placement="left" onConfirm={handleDeleteItems}>
                  <Button type="primary" style={{marginLeft:'5px'}}>
                    <Icon type="user-delete"/>
                    加入黑名单
                  </Button>
                </Popconfirm>
              </Col>
            </Row>
          }
          <List {...listProps} />
          {modalVisible && <Modal {...modalProps} />}
          {chatModalVisible && <ChatModal {...chatModalProps} />}
        </TabPane>
        <TabPane tab="粉丝排行榜" key={String(EnumPostStatus.粉丝排行榜)}>
          <Filter {...filterProps} />
          {
            selectedRowKeys.length > 0 &&
            <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
              <Col>
                {`Selected ${selectedRowKeys.length} items `}
                <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
                  <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
                </Popconfirm>
              </Col>
            </Row>
          }
          <List {...listProps} />
          {modalVisible && <Modal {...modalProps} />}
        </TabPane>
        <TabPane tab="粉丝黑名单" key={String(EnumPostStatus.粉丝黑名单)}>
          <Filter {...filterProps} />
          {
            selectedRowKeys.length > 0 &&
            <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
              <Col>
                {`Selected ${selectedRowKeys.length} items `}
                <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
                  <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
                </Popconfirm>
              </Col>
            </Row>
          }
          <List {...listProps} />
          {modalVisible && <Modal {...modalProps} />}
        </TabPane>
      </Tabs>
    </div>
  )
}

Fans.propTypes = {
  fans: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({fans, loading}) => ({fans, loading}))(Fans)
